//====================================================
//
//      btn
//
//====================================================

//设置按钮尺寸
.button-size(@paddingtb; @paddinglr; @fontsize; @height; @lineheight; @radius; @fontweight:@fontweight-def) {
    padding: @paddingtb @paddinglr;
    height: @height;
    line-height: @lineheight;
    font-size: @fontsize;   //unit( @fontsize, em );
    font-weight: @fontweight;
    .prefix-border-radius(@radius);
}


//默认按钮
.@{prefix}btn,
.@{prefix}btn-def {
    display: inline-block;
    position: relative;
    z-index: @zindex-btn;
    margin-bottom: 0;                           // For input.btn
    // font-weight: @fontweight-bold;
    text-align: center;
    vertical-align: middle;
    color: @color-def-btn;
    background-image: none;                     // Reset unusual Firefox-on-Android default style; see https://github.com/necolas/normalize.css/issues/214
    border: 1px solid @bordercolor-def-btn;     //transparent;
    background-color: @bgcolor-def-btn;
    // .prefix-gradient(@bgcolor-def-btn);
    cursor: @cursor-pointer;
    white-space: nowrap;
    touch-action: manipulation;                 //支持手势操作
    .button-size(@padding-btn-tb; @padding-btn-lr; @fontsize-btn; @height-btn; @lineheight-btn; @radius-btn);
    .prefix-selecttext(none);
    .prefix-transition();
    .prefix-box-shadow(@shadow-def-btn);
    &,
    &:active,
    &.active,
    &.loading {
        &:focus,
        &.focus {
            border-color: @bordercolor-focus-btn;
            z-index: @zindex-focus-btn;
            .prefix-tabfocus();
        }
    }
    &:hover,
    &.hover {
        color: @color-hover-btn;
        border-color: @bordercolor-hover-btn;
        background-color: @bgcolor-hover-btn;
        text-decoration: none;
        z-index: @zindex-hover-btn;
        .prefix-box-shadow(@shadow-hover-btn);
    }
    &:focus,
    &.focus {
        color: @color-focus-btn;
        border-color: @bordercolor-focus-btn;
        background-color: @bgcolor-focus-btn;
        text-decoration: none;
        z-index: @zindex-focus-btn;
        .prefix-box-shadow(@shadow-focus-btn);
    }
    &:active,
    &.active,
    &.loading {
        &,
        &:hover,
        &:focus,
        &.focus {
            color: @color-active-btn;
            border-color: @bordercolor-active-btn;
            background-color: @bgcolor-active-btn;
            z-index: @zindex-active-btn;
            .prefix-box-shadow(@shadow-active-btn);
        }
    }
    &:active {
        background-image: none;
    }
    &.active {
        cursor: @cursor-def;
    }
    &.loading {
        cursor: @cursor-loading;
    }
    &.border {
        border-color: @bordercolor-active-btn;
    }
    &.disabled,
    &[disabled],
    fieldset[disabled] & {
        &,
        &:hover,
        &:focus,
        &.focus,
        &:active,
        &.active {
            color: @color-disabled-btn;
            border-color: @bordercolor-disabled-btn;
            background-color: @bgcolor-disabled-btn;
            cursor: @cursor-no;
            .prefix-opacity(.55);
            .prefix-box-shadow(@shadow-disabled-btn) !important;
        }
    }
    a& {
        text-decoration: none;
        &.disabled,
        fieldset[disabled] & {
            pointer-events: none; // Future-proof disabling of clicks on `<a>` elements
        }
    }
}

.@{prefix}btn-small {
    .button-size(@padding-btn-small-tb; @padding-btn-small-lr; @fontsize-btn-small; @height-btn-small; @lineheight-btn-small; @radius-btn);
}
.@{prefix}btn-large {
    .button-size(@padding-btn-large-tb; @padding-btn-large-lr; @fontsize-btn-large; @height-btn-large; @lineheight-btn-large; @radius-btn);
}

.@{prefix}btn-full {
  display: block;
  width: 100%;
}


.@{prefix}btn-inverse {
    color: @color-def-btn-inverse;
    border-color: @bordercolor-def-btn-inverse;
    background-color: @bgcolor-def-btn-inverse;
    .prefix-box-shadow(@shadow-def-btn-inverse);
    &.border {
        border-color:  @bordercolor-active-btn-inverse;
    }
    &:hover,
    &.hover {
        color: @color-hover-btn-inverse;
        border-color:  @bordercolor-hover-btn-inverse;
        background-color: @bgcolor-hover-btn-inverse;
        .prefix-box-shadow(@shadow-hover-btn-inverse);
    }
    &:focus,
    &.focus {
        color: @color-focus-btn-inverse;
        border-color: @bordercolor-focus-btn-inverse;
        background-color: @bgcolor-focus-btn-inverse;
        .prefix-box-shadow(@shadow-focus-btn-inverse);
    }
    &:active,
    &.active,
    &.loading {
        &,
        &:hover,
        &:focus,
        &.focus {
            color: @color-active-btn-inverse;
            border-color: @bordercolor-active-btn-inverse;
            background-color: @bgcolor-active-btn-inverse;
            .prefix-box-shadow(@shadow-active-btn-inverse);
        }
    }
    &.disabled,
    &[disabled],
    fieldset[disabled] & {
        &,
        &:hover,
        &:focus,
        &.focus,
        &:active,
        &.active {
            color: @color-disabled-btn-inverse;
            border-color: @bordercolor-disabled-btn-inverse;
            background-color: @bgcolor-disabled-btn-inverse;
            .prefix-box-shadow(@shadow-disabled-btn-inverse);
        }
    }
    .badge {
        color: @color-white-normal;
        background-color: @color-black-normal;
    }
}



.@{prefix}btn-theme {
    color: @color-def-btn-theme;
    border-color: @bordercolor-def-btn-theme;
    background-color: @bgcolor-def-btn-theme;
    .prefix-box-shadow(@shadow-def-btn-theme);
    &.border {
        border-color: @bordercolor-def-btn-theme;
    }
    &:hover,
    &.hover {
        color: @color-hover-btn-theme;
        border-color: @bordercolor-hover-btn-theme;
        background-color: @bgcolor-hover-btn-theme;
        .prefix-box-shadow(@shadow-hover-btn-theme);
    }
    &:focus,
    &.focus {
        color: @color-focus-btn-theme;
        border-color: @bordercolor-focus-btn-theme;
        background-color: @bgcolor-focus-btn-theme;
        .prefix-box-shadow(@shadow-focus-btn-theme);
    }
    &:active,
    &.active,
    &.loading {
        &,
        &:hover,
        &:focus,
        &.focus {
            color: @color-active-btn-theme;
            border-color: @bordercolor-active-btn-theme;
            background-color: @bgcolor-active-btn-theme;
            .prefix-box-shadow(@shadow-active-btn-theme);
        }
    }
    &.disabled,
    &[disabled],
    fieldset[disabled] & {
        &,
        &:hover,
        &:focus,
        &.focus,
        &:active,
        &.active {
            color: @color-disabled-btn-theme;
            border-color: @bordercolor-disabled-btn-theme;
            background-color: @bgcolor-disabled-btn-theme;
            .prefix-box-shadow(@shadow-disabled-btn-theme);
        }
    }
    .badge {
        color: @color-white-normal;
        background-color: @color-theme-normal;
    }
}

.@{prefix}btn-key {
    color: @color-def-btn-key;
    border-color: @bordercolor-def-btn-key;
    background-color: @bgcolor-def-btn-key;
    .prefix-box-shadow(@shadow-def-btn-key);
    &.border {
        border-color:  @bordercolor-active-btn-key;
    }
    &:hover,
    &.hover {
        color: @color-hover-btn-key;
        border-color: @bordercolor-hover-btn-key;
        background-color: @bgcolor-hover-btn-key;
        .prefix-box-shadow(@shadow-hover-btn-key);
    }
    &:focus,
    &.focus {
        color: @color-focus-btn-key;
        border-color: @bordercolor-focus-btn-key;
        background-color: @bgcolor-focus-btn-key;
        .prefix-box-shadow(@shadow-focus-btn-key);
    }
    &:active,
    &.active,
    &.loading {
        &,
        &:hover,
        &:focus,
        &.focus {
            color: @color-active-btn-key;
            border-color: @bordercolor-active-btn-key;
            background-color: @bgcolor-active-btn-key;
            .prefix-box-shadow(@shadow-active-btn-key);
        }
    }
    &:active,
    &.active,
    &.loading {
        background-image: none;
    }
    &.disabled,
    &[disabled],
    fieldset[disabled] & {
        &,
        &:hover,
        &:focus,
        &.focus,
        &:active,
        &.active {
            color: @color-disabled-btn-key;
            border-color: @bordercolor-disabled-btn-key;
            background-color: @bgcolor-disabled-btn-key;
            .prefix-box-shadow(@shadow-disabled-btn-key);
        }
    }
    .badge {
        color: @color-white-normal;
        background-color: @color-key-normal;
    }
}

.@{prefix}btn-light {
    color: @color-def-btn-light;
    border-color: @bordercolor-def-btn-light;
    background-color: @bgcolor-def-btn-light;
    .prefix-box-shadow(@shadow-def-btn-light);
    &.border {
        border-color: @bordercolor-active-btn-light;
    }
    &:hover,
    &.hover {
        color: @color-hover-btn-light;
        border-color: @bordercolor-hover-btn-light;
        background-color: @bgcolor-hover-btn-light;
        .prefix-box-shadow(@shadow-hover-btn-light);
    }
    &:focus,
    &.focus {
        color: @color-focus-btn-light;
        border-color: @bordercolor-focus-btn-light;
        background-color: @bgcolor-focus-btn-light;
       .prefix-box-shadow(@shadow-focus-btn-light);
    }
    &:active,
    &.active,
    &.loading {
        &,
        &:hover,
        &:focus,
        &.focus {
            color: @color-active-btn-light;
            border-color: @bordercolor-active-btn-light;
            background-color: @bgcolor-active-btn-light;
            .prefix-box-shadow(@shadow-active-btn-light);
        }
    }
    &:active,
    &.active,
    &.loading {
        background-image: none;
    }
    &.disabled,
    &[disabled],
    fieldset[disabled] & {
        &,
        &:hover,
        &:focus,
        &.focus,
        &:active,
        &.active {
            color: @color-disabled-btn-light;
            border-color: @bordercolor-disabled-btn-light;
            background-color: @bgcolor-disabled-btn-light;
            .prefix-box-shadow(@shadow-disabled-btn-light);
        }
    }
    .badge {
        color: @color-black-normal;
        background-color: @color-light-normal;
    }
}

.@{prefix}btn-nice {
    color: @color-def-btn-nice;
    border-color: @bordercolor-def-btn-nice;
    background-color: @bgcolor-def-btn-nice;
    .prefix-box-shadow(@shadow-def-btn-nice);
    &.border {
        border-color: @bordercolor-active-btn-nice;
    }
    &:hover,
    &.hover {
        color: @color-hover-btn-nice;
        border-color: @bordercolor-hover-btn-nice;
        background-color: @bgcolor-hover-btn-nice;
        .prefix-box-shadow(@shadow-hover-btn-nice);
    }
    &:focus,
    &.focus {
        color: @color-focus-btn-nice;
        border-color: @bordercolor-focus-btn-nice;
        background-color: @bgcolor-focus-btn-nice;
        .prefix-box-shadow(@shadow-focus-btn-nice);
    }
    &:active,
    &.active,
    &.loading {
        &,
        &:hover,
        &:focus,
        &.focus {
            color: @color-active-btn-nice;
            border-color: @bordercolor-active-btn-nice;
            background-color: @bgcolor-active-btn-nice;
            .prefix-box-shadow(@shadow-active-btn-nice);
        }
    }
    &.disabled,
    &[disabled],
    fieldset[disabled] & {
        &,
        &:hover,
        &:focus,
        &.focus,
        &:active,
        &.active {
            color: @color-disabled-btn-nice;
            border-color: @bordercolor-disabled-btn-nice;
            background-color: @bgcolor-disabled-btn-nice;
            .prefix-box-shadow(@shadow-disabled-btn-nice);
        }
    }
    .badge {
        color: @color-white-normal;
        background-color: @color-nice-normal;
    }
}

.@{prefix}btn-border {
    border-width: @borderwidth-def-btn-border;
    color: @color-def-btn-border;
    border-color: @bordercolor-def-btn-border;
    background-color: @bgcolor-def-btn-border;
    .prefix-box-shadow(@shadow-def-btn-border);
    &:hover,
    &.hover {
        color: @color-hover-btn-border;
        border-color: @bordercolor-hover-btn-border;
        background-color: @bgcolor-hover-btn-border;
        .prefix-box-shadow(@shadow-hover-btn-border);
    }
    &:focus,
    &.focus {
        color: @color-focus-btn-border;
        border-color: @bordercolor-focus-btn-border;
        background-color: @bgcolor-focus-btn-border;
        .prefix-box-shadow(@shadow-focus-btn-border);
    }
    &:active,
    &.active,
    &.loading {
        &,
        &:hover,
        &:focus,
        &.focus {
            color: @color-active-btn-border;
            border-color: @bordercolor-active-btn-border;
            background-color: @bgcolor-active-btn-border;
            .prefix-box-shadow(@shadow-active-btn-border);
        }
    }
    &.disabled,
    &[disabled],
    fieldset[disabled] & {
        &,
        &:hover,
        &:focus,
        &.focus,
        &:active,
        &.active {
            color: @color-disabled-btn-border;
            border-color: @bordercolor-disabled-btn-border;
            background-color: @bgcolor-disabled-btn-border;
            .prefix-box-shadow(@shadow-disabled-btn-border);
        }
    }
    .badge {
        color: @color-gray-lighter;
        background-color: transparent;
    }
}

.@{prefix}btn-border-inverse {
    border-width: @borderwidth-def-btn-border;
    color: @color-def-btn-borderinverse;
    border-color: @bordercolor-def-btn-borderinverse;
    background-color: @bgcolor-def-btn-borderinverse;
    .prefix-box-shadow(@shadow-def-btn-borderinverse);
    &:hover,
    &.hover {
        color: @color-hover-btn-borderinverse;
        border-color: @bordercolor-hover-btn-borderinverse;
        background-color: @bgcolor-hover-btn-borderinverse;
        .prefix-box-shadow(@shadow-hover-btn-borderinverse);
    }
    &:focus,
    &.focus {
        color: @color-focus-btn-borderinverse;
        border-color: @bordercolor-focus-btn-borderinverse;
        background-color: @bgcolor-focus-btn-borderinverse;
        .prefix-box-shadow(@shadow-focus-btn-borderinverse);
    }
    &:active,
    &.active,
    &.loading {
        &,
        &:hover,
        &:focus,
        &.focus {
            color: @color-active-btn-borderinverse;
            border-color: @bordercolor-active-btn-borderinverse;
            background-color: @bgcolor-active-btn-borderinverse;
            .prefix-box-shadow(@shadow-active-btn-borderinverse);
        }
    }
    &.disabled,
    &[disabled],
    fieldset[disabled] & {
        &,
        &:hover,
        &:focus,
        &.focus,
        &:active,
        &.active {
            color: @color-disabled-btn-borderinverse;
            border-color: @bordercolor-disabled-btn-borderinverse;
            background-color: @bgcolor-disabled-btn-borderinverse;
            .prefix-box-shadow(@shadow-disabled-btn-borderinverse);
        }
    }
    .badge {
        color: @color-black-light;
        background-color: transparent;
    }
}

.@{prefix}btn-border,
.@{prefix}btn-border-inverse {
    line-height: @lineheight-btn - @borderwidth-def-btn-border*2;
}
.@{prefix}btn-border.@{prefix}btn-small,
.@{prefix}btn-border-inverse.@{prefix}btn-small {
    line-height: @lineheight-btn-small - @borderwidth-def-btn-border*2;
}
.@{prefix}btn-border.@{prefix}btn-large,
.@{prefix}btn-border-inverse.@{prefix}btn-large {
    line-height: @lineheight-btn-large - @borderwidth-def-btn-border*2;
}

.@{prefix}btn-link {
    color: @color-def-btn-link;
    border-color: @bordercolor-def-btn-link;
    background-color: @bgcolor-def-btn-link;
    .prefix-box-shadow(@shadow-def-btn-link);
    &:hover,
    &.hover {
        color: @color-hover-btn-link;
        border-color: @bordercolor-hover-btn-link;
        background-color: @bgcolor-hover-btn-link;
        text-decoration: underline;
        .prefix-box-shadow(@shadow-hover-btn-link);
    }
    &:focus,
    &.focus {
        color: @color-focus-btn-link;
        border-color: @bordercolor-focus-btn-link;
        background-color: @bgcolor-focus-btn-link;
        .prefix-box-shadow(@shadow-focus-btn-link);
    }
    &:active,
    &.active,
    &.loading {
        &,
        &:hover,
        &:focus,
        &.focus {
            color: @color-active-btn-link;
            border-color: @bordercolor-active-btn-link;
            background-color: @bgcolor-active-btn-link;
            text-decoration: none;
            .prefix-box-shadow(@shadow-active-btn-link);
        }
    }
    &.disabled,
    &[disabled],
    fieldset[disabled] & {
        &,
        &:hover,
        &:focus,
        &.focus,
        &:active,
        &.active {
            color: @color-disabled-btn-link;
            border-color: @bordercolor-disabled-btn-link;
            background-color: @bgcolor-disabled-btn-link;
            text-decoration: line-through;
            .prefix-box-shadow(@shadow-disabled-btn-link);
        }
    }
    .badge {
        color: @color-theme-normal;
    }
}
